<template>
  <div class="login">
    <div class="box">
      <p class="title">LUCKY连锁超市</p>
      <el-input v-model="username" placeholder="请输入用户名"></el-input>
      <el-input v-model="password" placeholder="请输入密码"></el-input>
      <el-button class="submit" type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request" //引入request（包装好的axios）来发起请求
import { setToken } from "@/utils/auth";
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    login() {
      let that = this
      request({
        url: '/api/user/login',
        params: {
          username: that.username,
          password: that.password,
        },
        method: "get",
      })
          .then(function (res) {
            that.$tip(res.data.resultCode);
            localStorage.setItem("luckyUsername",that.username);
            if(res.data.results.token){
              setToken(res.data.results.token)
              localStorage.setItem("luckyToken",res.data.results.token);
            }
            if (res.data.results.role == "1"){
              that.$router.replace('/manage');
            }else if(res.data.results.role == "2"){
              that.$router.replace('/store');
            }else{
              that.$router.replace('/user');
            }
          })
          .catch(function (error) {
            console.log(error)
              that.$tip(error.data.resultCode);
          });
    }
  }
}
</script>

<style scoped>
.login {
  height: 100vh;
  background-image: url('../../assets/background.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 500px;
  height: 400px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}

.title {
  font-size: 24px;
  text-align: center;
  font-weight: 900;
  color: rgb(44, 104, 84);
}

.submit {
  width: 120px;
  margin: 20px 190px;
}

.el-input {
  margin: 10px 0;
}
</style>
